<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购电子商城-详情页</title>
    <!-- 引入公共样式  -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入放大镜样式 -->
    <link rel="stylesheet" href="./lib/magnifier/magnifier.css">
    <!-- 引入当前文件样式  -->
    <link rel="stylesheet" href="./css/details.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 头部黑色 -->
        <div class="head-black container clearfix">
            <span class="fl">www.legou.com</span>
            <div class="black-right fr">
                <span class="fl">欢迎光临乐购</span>
                <div class="log fr">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </div>
        </div>
        <!-- logo部分 -->
        <div class="head-nav">
            <div class="container clearfix">
                <div class="logo fl">
                    <img class="fl" src="./img/logo.jpg" alt="">
                    <div class="logo-box fl">
                        <img src="./img/det-logo.png" alt="" class="fl">
                        <div class="fr mt22 tet">
                            <p>DJI大疆官方旗舰店</p>
                            <span>品牌直销</span>
                            <button>收藏本店</button>
                        </div>
                    </div>
                </div>
                <div class="nav-right fl">
                    <input type="text" placeholder="请输入搜索的商品名称">
                    <button><img src="./img/ser.png" alt=""></button>
                </div>
                <div class="btn-car fr">
                    <span class="car"> <img src="./img/sCart.png" alt=""> 购物车 <i>0</i> </span>
                </div>
            </div>
        </div>

    </div>

    <!-- banner -->
    <div class="banner">
        <img src="./img/det-banner.png" alt="">
    </div>

    <!-- 商品放大镜+信息 -->
    <div class="details container clearfix">
        <!-- 放大镜 -->
        <div class="magnifier-left fl">
            <div class="magnifier my-magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="./img/car.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./img/car (1).jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./img/car (2).jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./img/car (3).jpg"" />
                                </div>
                            </li>
                            <!-- <li>
                                <div class=" small-img">
                                    <img src="../icons/1.png" />
                                </div>
                            </li> -->
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>
        </div>
        <!-- 信息 -->
        <div class="productinfo fr">
            <h2>【新品首发】DJI 大疆RoboMaster S1 机甲大师 S1专业教育机器人</h2>
            <span>寓教于乐，玩出名堂</span>
            <div class="info clearfix">
                <div class="info-txt fl">
                    <p>
                        <i>价格:</i>
                        <span class="monery">¥3800.00</span>
                    </p>
                    <p>
                        <i>促销价:</i>
                        <span class="monry">¥ 3499.00 - 4200.00</span>
                    </p>
                    <p>
                        <i>本店活动:</i>
                        <span class="money">满99包邮</span>
                    </p>
                </div>
                <div class="fr mon">
                    <a href="#">更多优惠>></a>
                </div>
            </div>
            <!-- 运费 -->
            <div class="freight">
                <i>运费:</i>
                <span>江苏苏州 至 成都</span>
                <span>快递: 0.00</span>
            </div>
            <div class="sales">
                <div class="xiaol">
                    <i>月销量</i>
                    <span>2871</span>
                </div>
                <div class="pingj">
                    <i>累积评价</i>
                    <span>10915</span>
                </div>
                <div class="jif">
                    <i>送积分</i>
                    <span>300</span>
                    <i>起</i>
                </div>
            </div>
            <!-- 商品分类 -->
            <div class="classification clearfix">
                <span class="fl">颜色分类:</span>
                <div class="button-btn fr">
                    <button class="fl">机甲大师 S1RoboMaster S1套餐一</button>
                    <button class="fr">机甲大师 S1RoboMaster S1套餐二</button>
                    <button class="fl">机甲大师 S1RoboMaster S1套餐三</button>
                    <button class="fr">机甲大师 S1RoboMaster S1单机</button>
                    <button class="fl">机甲大师全套配件</button>
                    <button class="fr active">机甲大师 S2 预定</button>
                </div>
            </div>
            <!-- 数量 -->
            <div class="number clearfix">
                <span class="fl">数量:</span>
                <div class="num-btn fl">
                    <input type="text" placeholder="1">
                    <button class="add">∧</button>
                    <button class="down">∨</button>
                </div>
            </div>
            <!-- 花唄 -->
            <div class="tokio clearfix">
                <span class="fl">花呗分期:</span>
                <div class="fl">
                    <button>¥<i>1166.33</i>*3期(0手续费)</button>
                    <button>¥<i>583.16</i>*6期(0手续费)</button>
                    <button>¥<i>313.44</i>*12期(0手续费)</button>
                </div>
            </div>
            <div class="buy">
                <button class="buy-btn">立即购买</button>
                <button class="shopping-cart"><img src="./img/sCar.png" alt=""> 加入购物车</button>
            </div>
            <div class="collection clearfix">
                <span class="fr">举报</span>
                <span class="fr">★收藏商品</span>
            </div>
            <div class="sever clearfix">
                <span class="fl">服务承诺:</span>
                <ul class="fr">
                    <li class="fl"><a href="#">正品保证</a></li>
                    <li class="fl"><a href="#">急速退款</a></li>
                    <li class="fl"><a href="#">赠运费险</a></li>
                    <li class="fl"><a href="#">七天无理由退换</a></li>
                    <li class="fl"><a href="#">支付方式∨</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 产品详情 -->
    <div class="product-details container clearfix">
        <div class="details-left fl">
            <!-- 头部 -->
            <ul class="clearfix">
                <li class="evalu-title fl">产品详情</li>
                <li class="evalu-title fl active">累积评价 10915</li>
            </ul>
            <!-- 内容区域 -->
            <div class="content">
                <div class="evalu-imgs">
                    <img src="./img/evalue.jpg" alt="">
                    <img src="./img/evalu.jpg" alt="">
                </div>
                <div class="evalu-imgs clearfix particulars current">
                    <div class="stars clearfix">
                        <div class="star fl">
                            <p>与描述相符</p>
                            <span>4.9</span>
                            <i>★★★★☆</i>
                        </div>
                        <div class="praise fl">
                            <span class="fl">好评率98%</span>
                            <div class="grey fl"></div>
                            <div class="blue fl"></div>
                        </div>
                    </div>
                    <div class="grey-btn clearfix">
                        <div class="left_btn fl">
                            <input type="radio" checked>&nbsp;全选
                            <input type="radio">&nbsp;追加(12)
                            <input type="radio">&nbsp;图片(93)
                        </div>
                        <div class="right_btn fr">
                            <button>按默认∨</button>
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                    <div class="text-content clearfix">
                        <div class="pingjia-content fl">
                            <h6>挺不错的，机甲大师对战T-34-85</h6>
                            <img src="./img/p1.png" alt="">
                            <span>2019-09-09 13:55:30</span>
                            <p>解释：亲，感谢您在DJI
                                大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们一直也在不断的努力争取给您最好的购物体验，感谢亲的支持，期待下次亲的光临
                            </p>
                        </div>
                        <div class="anonymous fr">
                            t***1(匿名)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-right fr">
            <div class="like">猜你喜欢</div>
            <div class="like-img">
                <img src="./img/car (3).jpg" alt="">
                <i>¥</i><span>19999.00</span>
            </div>
            <div class="like-img">
                <img src="./img/car (3).jpg" alt="">
                <i>¥</i><span>19999.00</span>
            </div>
            <div class="like-img">
                <img src="./img/car (3).jpg" alt="">
                <i>¥</i><span>19999.00</span>
            </div>
            <div class="like-img">
                <img src="./img/car (3).jpg" alt="">
                <i>¥</i><span>19999.00</span>
            </div>
        </div>
        <p class="page fl">
            <a class="page-box" href="#">上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">...</a>
            <a class="page-box" href="#">下一页</a>
            <a class="page-box" href="#">末页</a>
        </p>
    </div>

    </div>









    <!-- foot -->
    <div class="foot">
        <div class="foot-content container">
            <ul class="foot-img">
                <li>
                    <img src="./img/foot-img1.jpg" alt="">
                    <p>正品保障</p>
                    <span>正品行货 放心选购</span>
                </li>
                <li>
                    <img src="./img/foot-img2.jpg" alt="">
                    <p>满86包邮</p>
                    <span>满86元 免运费</span>
                </li>
                <li>
                    <img src="./img/foot-img3.jpg" alt="">
                    <p>售后无忧</p>
                    <span>7天无理由退货</span>
                </li>
                <li>
                    <img src="./img/foot-img4.jpg" alt="">
                    <p>准时送达</p>
                    <span>收货时间由你做主</span>
                </li>
            </ul>

            <div class="line"></div>

            <div class="foot-link">
                <div class="link-left clearfix">
                    <ul class="fl link-left-list">
                        <li>
                            <h4>新手入门</h4>
                            <a href="#">购物流程</a>
                            <a href="#">会员制度</a>
                            <a href="#">订单查询</a>
                            <a href="#">服务协议及隐私说明</a>
                            <a href="#">网站地图</a>
                        </li>
                        <li>
                            <h4>支付方式</h4>
                            <a href="#">货到付款</a>
                            <a href="#">网上支付</a>
                            <a href="#">礼品卡支付</a>
                            <a href="#">其它支付</a>
                        </li>
                        <li>
                            <h4>配送服务</h4>
                            <a href="#">配送进度查询</a>
                            <a href="#">商品验货与签收</a>
                        </li>
                        <li>
                            <h4>相关规则</h4>
                            <a href="#">平台规则</a>
                            <a href="#">退换货政策</a>
                            <a href="#">发票制度</a>
                            <a href="#">帮助中心</a>
                        </li>
                    </ul>
                    <div class="link-right fr">
                        <div class="link-right-code1 fl">
                            <p>App更优惠</p>
                            <img src="./img/qryhd.png" alt="">
                        </div>
                        <div class="link-right-code2 fr">
                            <p>加微信查订单</p>
                            <img src="./img/qryhd.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>

    <div class="feet">
        <p>
            沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX |
        </p>
        <p>
            沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证
        </p>
        <div class="feet-img">
            <img src="./img/feet1.jpg" alt="">
            <img src="./img/feet2.jpg" alt="">
            <img src="./img/feet3.png" alt="">
            <img src="./img/feet4.jpg" alt="">
            <img src="./img/feet5.jpg" alt="">
            <img src="./img/feet6.png" alt="">
        </div>
    </div>

    <script src="./lib/slider/lib/jquery.min.js"></script>
    <script src="./lib/slider/lib/jquery.slidebox.js"></script>
    <!-- 引入放大镜js -->
    <script src="./lib/magnifier/magnifier(1).js"></script>
    <!-- 引入当前文件的js -->
    <script src="./js/details.js"></script>
</body>

</html>